<template>
	<view style="margin-bottom: 100rpx;">
			<uni-nav-bar title="订单确认" backgroundColor="#ffffff" status-bar :fixed="true" :border="false">
				<block slot="left">
					<view style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
						<view @click="goBack" style="margin-left: 10px;">
							<uni-icons type="back" size="20" color="#666" />
						</view>
						<view @click="goHome" style="margin-left: 10px;">
							<uni-icons type="home" size="20" color="#666" />
						</view>
					</view>
				</block>
			</uni-nav-bar>
		
			<view style="display: flex;flex-direction: column;padding-bottom: 80px;position: relative;" :style="{height: `${windowHeight-105}px`}">
				
				<view style="height: 80px;position: absolute;width: 100%;bottom: 0;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;background-color: #ffffff;padding: 0 10px 0 10px;">
					<view style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center;width: 100%;margin-right: 10px;">
						<text style="font-size: 14px;color: #333333;">
							合计：
						</text>
						<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
							<view style="padding-top: 3px;">
								<text style="font-size: 12px;color: #BFA558;font-weight: 600;">
									￥
								</text>
							</view>
							<text style="font-size: 20px;color: #BFA558;font-weight: 600;">
								{{goodsTotalMoney}}
							</text>
						</view>
					</view>
					<view @click="handNowPay" style="border-radius: 25px;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 14px;color: #000000;background: linear-gradient(to right,#F3E9B4,#EBDB9B);width: 200px;height: 45px;margin-left: 10px;">
						立即支付
					</view>
				</view>
				
				<scroll-view style="padding-bottom: 10px;height: 100%;border: 0px solid black;" scroll-top="0" scroll-y="true">
					
					<!-- 收货地址 -->
					<view style="padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						<view v-if="addressList.length > 0" style="display: flex;flex-direction: column;background-color: #ffffff;border-radius: 5px;padding: 10px;">
							<view style="display: flex;flex-direction: row;padding-bottom: 5px;">
								<view style="padding: 2px;border-radius: 25px;box-shadow: 0 1px 4px rgba(0,21,41,.58);display: flex;flex-direction: column;justify-content: center;align-items: center;">
									<uni-icons type="shop-filled" size="20" color="#DFC889"></uni-icons>
								</view>
								<view style="display: flex;align-items: center;margin-left: 10px;">
									<text style="font-size: 15px;color: #333333;">收货地址</text>
								</view>
							</view>
							
							<view @click="handleMoreAddAddress" style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;padding-bottom: 5px;flex-direction: row;">
								<view style="display: flex;flex-direction: column;">
									<view style="padding: 5px;display: flex;flex-direction: column;">
										<text :decode="true" style="color: #000000;font-size: 14px;margin-left: 8px;line-height: 20px;font-weight: 600;">
											{{addressList[0].address}}
										</text>
									</view>
									<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;color: #666666;">
										<view style="">
											{{addressList[0].addressName}}
										</view>
										<view style="margin-left: 10px;">
											{{addressList[0].addressMobile}}
										</view>
										
										<view v-if="addressList[0].isDefAddress === 1" style="margin-left: 10px;display: flex;align-items: center;font-size: 12px;color: #AA9148;padding: 2px 5px 2px 5px;background-color: #F6EDD2;">
											默认地址
										</view>
									</view>
									
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;">
									<uni-icons type="right" size="18" color="#999999"></uni-icons>
								</view>
							</view>
							
						</view>
						<!-- 收货地址不存在 则新增-->
						<view  v-if="addressList.length == 0"  style="display: flex;flex-direction: column;background-color: #ffffff;border-radius: 5px;padding: 10px;">
							<view style="display: flex;flex-direction: row;padding-bottom: 5px;">
								<view style="padding: 2px;border-radius: 25px;box-shadow: 0 1px 4px rgba(0,21,41,.58);display: flex;flex-direction: column;justify-content: center;align-items: center;">
									<uni-icons type="shop-filled" size="20" color="#DFC889"></uni-icons>
								</view>
								<view style="display: flex;align-items: center;margin-left: 10px;">
									<text style="font-size: 15px;color: #333333;">收货地址</text>
								</view>
							</view>
							<view style="margin-top: 5px;display: flex;flex-direction: row;justify-content: center;align-items: center;padding-bottom: 5px;">
								<view @click="handleAddAddress" style="border: 1px solid #333333;padding: 5px;width: 130px;border-radius: 25px;font-size: 14px;color: #000000;display: flex;flex-direction: row;justify-content: center;align-items: center;">
									添加收货地址
								</view>
							</view>
						</view>
					</view>
					<!-- 商品列表 -->
					<view style="border: 0px solid red;padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						
						<view style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;color: #333333;">
								商品信息
							</view>
							<view style="margin: 10px 0 10px 0;display: flex;flex-direction: row;">
								<view>
									<!-- <image style="width: 120px;height: 110px;border-radius: 5px;" src="../../static/images/noPics.png"></image> -->
									<image style="width: 120px;height: 110px;border-radius: 5px;" :src="goodsData.mallGoodsBannerList[0].bannerPic"></image>
								</view>
								<view style="flex:1;padding-left: 10px;display: flex;flex-direction: column;">
									<view style="">
										<text :decode="true" style="color: #242424;font-size: 14px;
												line-height: 20px;overflow: hidden;
												word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{goodsData.goodsName}}
										</text>
									</view>
									<!-- 判断是否存在商品规格，如存在，则显示 -->
									<view v-if="goodsSpecs !== null" style="margin-top: 5px;">
										<text v-if="goodsSpecs.length == 1" :decode="true" style="color: #BEBEBE;font-size: 12px;
												overflow: hidden;
												word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{goodsSpecs[0].key}} {{goodsSpecs[0].val}}
										</text>
										<text v-if="goodsSpecs.length == 2" :decode="true" style="color: #BEBEBE;font-size: 12px;
												overflow: hidden;
												word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{goodsSpecs[0].key}} {{goodsSpecs[0].val}} | {{goodsSpecs[1].key}} {{goodsSpecs[1].val}}
										</text>
									</view>
									<!-- 显示商品金额，数量 -->
									<view style="flex:1;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
										<view style="font-size: 16px;color: #4F4F4F;">
											¥{{goodsMoney}}
										</view>
										<view style="font-size: 16px;color: #333333;display: flex;flex-direction: row;align-items: center;">
											<view style="padding-top: 1px;margin-right: 2px;">
												× 
											</view>
											<view style="">
												{{goodsData.goodsNumber}}
											</view>
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
					
					<!-- 其他 -->
					<view style="border: 0px solid red;padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						<view style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view style="font-size: 14px;color: #272727;">
									商品总金额
								</view>
								<view style="font-size: 14px;color: #232323;font-weight: 600;">
									¥{{totalMoney}}
								</view>
							</view>
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 10px;">
								<view style="display: flex;flex-direction: row;align-items: flex-end;">
									<view style="font-size: 14px;color: #272727;">
										会员折扣
									</view>
									<view style="font-size: 12px;color: #BEBEBE;margin-left: 5px;">
										({{userInfo.mallMember.memberName}} | {{userInfo.mallMember.memberDiscount}}折)
									</view>
								</view>
								
								<view style="font-size: 14px;color: #E72C2D;font-weight: 600;display: flex;flex-direction: row;align-items: center;">
									<view style="margin-right: 2px;">
										-
									</view>
									<view>
										¥{{memberDiscountMoney}}
									</view>
								</view>
							</view>
						</view>
					</view> 
					
					<!-- 订单备注 -->
					<view style="border: 0px solid red;padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						<view style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view style="display: flex;flex-direction: column;align-items: center;font-size: 14px;color: #515151;">
									订单备注
								</view>
								<view style="display: flex;flex-direction: column;align-items: center;flex: 1;margin-left: 10px;">
									<uni-easyinput :inputBorder="false"  trim="all" v-model="orderRemark" placeholder="请输入订单备注信息(可空)"></uni-easyinput>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 其他 -->
<!-- 					<view style="border: 0px solid red;padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						<view style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;">
							
						</view>
					</view> -->
					
					<!-- 支付方式 -->
					<view style="border: 0px solid red;padding: 10px 10px 10px 10px;display: flex;flex-direction: column;">
						
						<view style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view style="display: flex;flex-direction: column;align-items: center;font-size: 14px;color: #515151;">
									支付方式
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;">
									<image style="width: 25px;height: 25px;margin-right: 5px;" src="../../static/images/wxPay1.png"></image>
									<text style="font-size: 14px;color: #515151;">
										微信支付
									</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 支付方式 End-->
					
					
					
				</scroll-view>
				
			</view>
	</view>
</template>

<script>
	import BigNumber from '@/api/bignumber.js'
	
	export default {
		name:'payNow',
		onShow() {
			console.log('____onShow__')
			this.initAddressData();
		},
		created() {
			console.log('____created__')
			this.goodsData = '';
			let goodsPayInfoAll = JSON.parse(decodeURIComponent(this.goodsPayInfo));
			this.goodsData = JSON.parse(goodsPayInfoAll.goodsData);
			//console.log(this.goodsData,'_________解析后_goodsData__-')
			let jsonGoodsSpecs = this.goodsData.skuInfo.goodsSpecs;
			if(jsonGoodsSpecs !== null){
				this.goodsSpecs = JSON.parse(jsonGoodsSpecs);
			}
			
			//保留小数点后两位,商品单价
			this.goodsMoney = new BigNumber(this.goodsData.skuInfo.discountPrice).toFixed(2, 1);
			//商品单价 * 数量 = 总金额
			this.totalMoney = new BigNumber(this.goodsMoney).times(this.goodsData.goodsNumber).toFixed(2, 1);
			console.log(this.totalMoney,'_______商品总金额_____')
			
			//根据会员级别折扣计算付款金额：公式：总价×折扣/10
			console.log(this.userInfo.mallMember.memberDiscount,'__当前会员折扣__')
			//商品打折后总金额
			this.goodsTotalMoney = new BigNumber(this.totalMoney).times(this.userInfo.mallMember.memberDiscount).div(10).toFixed(2, 1);
			console.log(this.goodsTotalMoney,'_______商品-打折后总金额_____')
			
			//会员折扣减免
			this.memberDiscountMoney = new BigNumber(this.totalMoney).minus(new BigNumber(this.goodsTotalMoney)).toFixed(2, 1);
			console.log(this.memberDiscountMoney,'___会员 减免折扣金额____')
			
			//const x = new BigNumber('88');
			//const y = new BigNumber(2);
			//console.log(x.plus(y).toFixed(2, 1))
			
			//const y = new BigNumber('666.6626');
			// console.log(x.plus(y),'____created__',x.plus(y).toFixed(2, 1))
			//console.log(x.times(2),'____created__',x.times(2).toFixed(2, 1))
			
			
		},
		computed:{
		  userInfo() {
			return this.$store.state.user.userinfo
		  },
		  windowHeight() {
			return uni.getSystemInfoSync().windowHeight - 0
		  }
		},
		data() {
			return {
			  goodsPayInfo:getApp().globalData.config.appInfo.goodsPayInfo,
			  goodsData:'',//商品信息
			  goodsSpecs:null,//商品规格
			  addressList:[],//收货地址
			  txCloudEnvID:getApp().globalData.config.appInfo.txCloudEnvID,
			  vxService:getApp().globalData.config.appInfo.vxService,
			  goodsMoney:'',//商品金额
			  totalMoney:0,//商品总金额
			  goodsTotalMoney:0,//商品 折后总金额
			  orderRemark:null,//订单备注信息
			  memberDiscountMoney:0,//会员折扣减免
				
			}
		},
		methods: {
			initAddressData(){
				
				if(this.userInfo){
					this.addressList = [];
					console.log(this.userInfo,'___当前用户信息____初始化收货地址____--')
					
					wx.cloud.callContainer({
					  "config": {
						"env": this.txCloudEnvID
					  },
					  "path": "/system/address/listByClientId?clientId="+this.userInfo.clientId,
					  "header": {
						"X-WX-SERVICE": this.vxService,
						"content-type": "application/json"
					  },
					  "method": "GET",
					  "data": ""
					}).then((res) =>{
						//console.log(res);
						this.addressList = res.data.data;
						console.log(this.addressList,'__this.addressList__',this.addressList.length);
						
						// this.addressList.forEach((item) =>{
						// 	console.log(item.addressName,'___',item.addressMobile)
						// })
						
					}).catch((e) =>{
						console.log(e.message);
						if(e.message.indexOf('102002') !== -1){
							this.$modal.showToast('请求超时')
						}else{
							this.$modal.showToast(e.message)
						}
					})					
				}
				
			},
			handleAddAddress(){//新增收货地址
			  //this.$tab.navigateTo('/pages/mine/address/addAddress?clientId='+this.userInfo.clientId)
			  this.$tab.navigateTo('/pagesA/address/addAddress?clientId='+this.userInfo.clientId)
			},
			handleMoreAddAddress(){//查看所有地址
				this.$tab.navigateTo("/pages/paynow/addresslist");
			},
			handNowPay(){
				if(!this.userInfo){
					this.$modal.showToast('未登录')
					return;
				}
				if(this.addressList.length == 0){
					this.$modal.showToast('请选择收货地址')
					return;
				}
				let _this = this;
				console.log('_________立即支付_______')
				
				/* 收货地址 */
				let orderAddress = "姓名："+this.addressList[0].addressName+" 手机号："+this.addressList[0].addressMobile+" 地址："+this.addressList[0].address;
				console.log(orderAddress,'_收货地址________')
				
				console.log(this.orderRemark,'___________订单备注____')
				
				console.log(this.userInfo.clientId,'________当前用户主键id____')
				
				console.log(this.goodsData,'____________this.goodsData_________-')
				let form1= {
					'totalMoney':this.totalMoney,//商品总金额
					'memberDiscount':this.userInfo.mallMember.memberDiscount,//当前会员折扣
					'discountTotalMoney':this.goodsTotalMoney,//商品-打折后总金额
					'memberSubMoney':this.memberDiscountMoney,//会员 减免折扣金额
					'goodsData':this.goodsData,//商品信息
				}
				//let jsonForm1=encodeURIComponent(JSON.stringify(form1));
				let jsonForm1List = [];
				jsonForm1List.push(encodeURIComponent(JSON.stringify(form1)));
				console.log(jsonForm1List,'________form1_____')
				
				let remark = null;
				if(this.orderRemark !== null){
					remark = encodeURIComponent(this.orderRemark);
				}
				
				let formData ={
					'clientId':this.userInfo.clientId,
					'orderMoney':this.goodsTotalMoney,//商品-打折后总金额
					'orderAddress':orderAddress,
					'orderRemark':remark,
					'goodsData':jsonForm1List,
					'orderNumber':null,
				}
				
				console.log(formData,'________formData____')
				/* 生成微信支付预下单 */
				wx.cloud.callContainer({
				  "config": {
				    "env": this.txCloudEnvID
				  },
				  "path": "/system/wxPay/preOrderPay",
				  "header": {
				    "X-WX-SERVICE": this.vxService,
				    "content-type": "application/json"
				  },
				  "method": "POST",
				  "data": formData
				}).then((res) =>{
					console.log(res)
					
					if(res.data.stockTitle === null){
						if(res.data.data.code === 'SUCCESS'){
							console.log(res.data.data.res,'_____进入支付___')
							let orderInfoFormData = res.data.orderInfo;
							console.log(orderInfoFormData,'__orderInfo__')
							wx.requestPayment({
							  appId:res.data.data.res.appId,
							  timeStamp: res.data.data.res.timeStamp,
							  nonceStr: res.data.data.res.nonceStr,
							  package: res.data.data.res.package,
							  signType: res.data.data.res.signType,
							  paySign: res.data.data.res.paySign,
							  success (res) {//调用支付成功
								console.log(orderInfoFormData,'__订单编号____支付成功___',res.errMsg)
								_this.createPayOrder(orderInfoFormData);
							  },
							  fail (res) {
								  //用户取消支付,调用支付失败，其中 detail message 为后台返回的详细失败原因
								  console.log('__调用支付_fail__',res.errMsg)
								  if(res.errMsg.indexOf('fail cancel') != -1){
									  _this.$modal.showToast('取消支付')
								  }else{
									  _this.$modal.showToast(res.errMsg)
								  }
							  }
							})
						}else if(res.data.data.code !== 'SUCCESS'){
							this.$modal.showToast(res.data.data.res)
						}
						
						// const result = JSON.parse(res.data.data).respdata;
						// /* 返回状态码	return_code	是	String(16)	SUCCESS	SUCCESS/FAIL
						// 此字段是通信标识，非交易标识，交易是否成功需要查看result_code来判断 */
						// if(result.return_code === 'SUCCESS'){
						// 	let orderInfoFormData = res.data.orderInfo;
						// 	//console.log(result);
						// 	wx.requestPayment({
						// 	  timeStamp: result.payment.timeStamp,
						// 	  nonceStr: result.payment.nonceStr,
						// 	  package: result.payment.package,
						// 	  signType: 'MD5',//默认MD5
						// 	  paySign: result.payment.paySign,
						// 	  success (res) {//调用支付成功
						// 		  //console.log(orderInfoFormData,'__订单编号____支付成功___',res.errMsg)
						// 		  _this.createPayOrder(orderInfoFormData);
						// 	  },
						// 	  fail (res) {
						// 		  //用户取消支付,调用支付失败，其中 detail message 为后台返回的详细失败原因
						// 		  console.log('__调用支付_fail__',res.errMsg)
						// 		  if(res.errMsg.indexOf('fail cancel') != -1){
						// 			  _this.$modal.showToast('取消支付')
						// 		  }else{
						// 			  _this.$modal.showToast(res.errMsg)
						// 		  }
						// 	  }
						// 	})
						// }else if(result.return_code !== 'SUCCESS'){
						// 	this.$modal.showToast(result.return_msg)
						// }
						
					}else{
						this.$modal.showToast(res.data.stockTitle)
					}
				}).catch((e) =>{
					console.log(e.message);
					if(e.message.indexOf('102002') !== -1){
						this.$modal.showToast('请求超时')
					}else{
						this.$modal.showToast(e.message)
					}
				})
				
				
				//商品单价 * 数量 = 总金额
				// this.totalMoney = new BigNumber(this.goodsMoney).times(this.goodsData.goodsNumber).toFixed(2, 1);
				// console.log(this.totalMoney,'_______商品总金额_____')
				
				// //根据会员级别折扣计算付款金额：公式：总价×折扣/10
				// console.log(this.userInfo.mallMember.memberDiscount,'__当前会员折扣__')
				// //商品打折后总金额
				// this.goodsTotalMoney = new BigNumber(this.totalMoney).times(this.userInfo.mallMember.memberDiscount).div(10).toFixed(2, 1);
				// console.log(this.goodsTotalMoney,'_______商品-打折后总金额_____')
				
				// //会员折扣减免
				// this.memberDiscountMoney = new BigNumber(this.totalMoney).minus(new BigNumber(this.goodsTotalMoney)).toFixed(2, 1);
				// console.log(this.memberDiscountMoney,'___会员 减免折扣金额____')
				
				
			},
			createPayOrder(data){//支付成功后，创建订单
				console.log(data,'________data__支付成功，创建订单__')
				wx.cloud.callContainer({
				  "config": {
					"env": this.txCloudEnvID
				  },
				  "path": "/system/wxPay/createOrderInfo",
				  "header": {
					"X-WX-SERVICE": this.vxService,
					"content-type": "application/json"
				  },
				  "method": "POST",
				  "data": data
				}).then((res) =>{
					console.log(res);
					let orderInfo = res.data.orderInfo;
					// orderInfo:
					// 		orderMoney: "6594.00"
					// 		orderNumber: "YQTXCYIPEKCST2024083020061177221"
					// 		payTime: "2024-08-30 20:06:49"
					
					this.$tab.reLaunch("/pages/paynow/paysuccess?orderNumber="+orderInfo.orderNumber+"&payTime="+orderInfo.payTime+"&orderMoney="+orderInfo.orderMoney);
				}).catch((e) =>{
					console.log(e.message);
					if(e.message.indexOf('102002') !== -1){
						this.$modal.showToast('请求超时')
					}else{
						this.$modal.showToast(e.message)
					}
				})
			},
			goBack(){
				this.$tab.navigateBack();
			},
			goHome(){
				this.$tab.reLaunch("/pages/index");
			}
			
		}
	}
</script>

<style>

</style>
